<template>
  <div class="calendar">
    <div class="header">
      <div class="header-changeDate">
        <i class="icon el-icon-arrow-left" @click="dateChange('reduce')"></i>
        <span class="time">{{year}}年{{month}}月</span>
        <i class="icon el-icon-arrow-right" @click="dateChange('add')"></i>
      </div>
      <div class="header-btnGroup">
        <p class="btn" @click="dateChange('reduce')">上个月</p>
        <p class="btn btn-center">今天</p>
        <p class="btn" @click="dateChange('add')">下个月</p>
      </div>
    </div>
    <div class="week">
      <p class="week-list" v-for="(item,index) in weekGroup" :key="'week'+index">{{item}}</p>
    </div>
    <table class="table">
      <tr class="table-row" v-for="(week,i) in calendarData" :key="i">
        <td class="table-chunk" v-for="(day,ii) in week" :key="ii">
          <p class="day__status">
            <span class="day">
              {{day.day}}
            </span>
            <span class="status">
              {{day.status}}
            </span>
          </p>
          <div class="commute" v-if="day.startime&&day.endtime">
            <p>上班：{{day.startime}}</p>
            <p>下班：{{day.endtime}}</p>
          </div>
        </td>
      </tr>
    </table>

  </div>
</template>

<script>
export default {
  data() {
    this.weekGroup = ['一', '二', '三', '四', '五', '六', '日']
    return {
      year: '2022',
      month: '07',
      selectedDay: '',
      nowDay: '',
      calendar: [],
      monthStartWeek: '',
      monthEndWeek: '',
      moni: {
        day: 1,
        status: 0,
        startime: '08:28:28',
        starstatus: '正常',
        endtime: '08:28:28',
        endstatus: '正常',
      },
      moniData: [],
      calendarData: []
    }
  },
  mounted() {
    for (let i = 0; i < 31; i++) {
      this.moniData.push(this.moni)
    }
    this.monthStartWeek = this.getDayOfWeek(this.year, this.month, 1)
    this.monthEndWeek = this.getDayOfWeek(this.year, this.month, this.calendarData.length)
    if (this.monthStartWeek > 1) {
      for (let i = 1; i < this.monthStartWeek; i++) {
        this.moniData.unshift({})
      }
    }
    if (this.monthEndWeek < 7) {
      for (let i = 0; i < 7 - this.monthEndWeek; i++) {
        this.moniData.push({})
      }
    }
    let moniDataLength = this.moniData.length / 7
    for (let i = 0; i < moniDataLength; i++) {
      this.calendarData.push(this.moniData.splice(0, 7))
    }
  },
  methods: {
    // 选中时间
    selectDate(item) {
      if (item.isCurrentMonth) {
        this.selectedDay = `${this.year}-${this.month}-${item.day}`
        this.$emit("select", this.selectedDay)
      }
    },
    /**
     * @description: 日期的切换
     * @param {String} time: 要切换的时间
     * @param {String} change: 时间的加减
     */
    dateChange(change) {
      if (change === 'reduce') {
        if (this.month == '1') {
          this.month = 12
          this.year--
        } else {
          this.month--
        }

      } else if (change === 'add') {
        if (this.month == '12') {
          this.month = 1
          this.year++
        } else {
          this.month++
        }
      }
    },
    /**
     * @description: 获取当前日期
     * @return {*} [YYYY, D, M]
     */
    getNowDate() {
      return new Date().toLocaleDateString().split('/');
    },
    /**
     * @description: 获取本月最后一天 ( 如果不传年月就是当前年月 )
     * @param {String: YYYY} year: 哪一年
     * @param {String: DD} month: 哪一月
     * @return {*} 最后一天的日期
     */
    getMonthFinalDay(year, month) {
      let day = '';
      if (year == null || year == undefined || year == '') {
        year = new Date().getFullYear();
      }
      if (month == null || month == undefined || month == '') {
        month = new Date().getMonth() + 1;
      }
      day = new Date(new Date(year, month).setDate(0)).getDate();
      return day;
    },
    /**
     * @description: 获取指定的日期是周几
     * @param {String: YYYY/DD/MM} date: 指定的日期
     * @return {*} 周几
     */
    getDayOfWeek(year, month, day) {
      let weekGroup = ['7', '1', '2', '3', '4', '5', '6']
      let week = new Date(`${year}/${month}/${day}`).getDay();
      return weekGroup[week];
    },
  },
}
</script>

<style lang="scss" scoped>
.calendar {
  width: 75vw;
  border: 1px;
}
.header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  .header-title {
    position: absolute;
    left: 0;
  }
  .header-changeDate {
    display: flex;
    align-items: center;
    .icon {
      cursor: pointer;
      font-size: 20px;
    }
    .time {
      width: 13vw;
      text-align: center;
      font-size: 18px;
    }
  }
  .header-btnGroup {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ebf0f0;
    border-radius: 0.3vw;
    overflow: hidden;
    .btn {
      cursor: pointer;
      line-height: 1;
      padding: 8px 10px;
      font-size: 0.83vw;
      color: #666;
      &:hover {
        color: #fff;
        background: linear-gradient(215deg, #1db8ab, #179d92);
      }
    }
    .btn-center {
      border-left: 1px solid #fff;
      border-right: 1px solid #fff;
    }
  }
}

.week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  height: 80px;
  background-color: #f8f8f8;
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  &-list {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }
}
.table {
  width: 100%;
  tr td:first-child {
    border-left: 1px solid #ebeef5;
  }
  tr:first-child td {
    border-top: 1px solid #ebeef5;
  }

  td {
    border-bottom: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
    vertical-align: top;
    transition: background-color 0.2s ease;
  }
  .table-chunk {
    height: 100px;
    .day__status {
      display: flex;
      align-items: center;
      padding: 15px 1.7vw;
      .day {
        font-size: 0.94vw;
        font-weight: 400;
        color: #000000;
      }
      .status {
        padding-left: 1.2vw;
        font-size: 0.63vw;
        font-weight: 400;
        color: #ff6c60;
      }
    }
    .commute {
      padding-left: 1vw;
      font-size: 0.73vw;
      font-weight: 400;
      color: #666666;
    }
  }
}
</style>